<!--
 * @FileDescription 应用界面下拉框
 * @Author 杨宇翔
 * @Date 20220629 09:17:08
 * @LastEditors 杨宇翔
 * @LastEditTime 20220629 09:17:08
-->
<template>
    <div ref="element" class="dropdown">
        <div class="header" @click="state = !state">
            {{ selection }}
        </div>
        <div class="container" v-show="state">
            <span v-for="pair of props.Options" :key="typeof pair == 'string' ? pair : pair[1]"
                @click="OnSelectionChanged(pair)">
                {{
                        typeof pair == 'string' ? pair : pair[1]
                }}
            </span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, Ref, ref, watch } from 'vue';

interface Props {
    Options: Array<string> | Map<number, string> | Map<boolean, string>;
    modelValue: string | number | boolean;
}

interface Emits {
    (event: 'update:modelValue', value: string | number | boolean): void;
}

const props = defineProps<Props>();
const emits = defineEmits<Emits>();

const state = ref(false);

const selection = computed(() => Resolve(props.modelValue));

const element: Ref<HTMLDivElement | null> = ref(null);

watch(state, value => element.value!.style.zIndex = value ? '1' : '0');

function Resolve(value: string | number | boolean): string {
    switch (typeof value) {
        case 'string':
            return value;
        case 'number':
            return (<Map<number, string>>props.Options).get(value)!;
        case 'boolean':
            return (<Map<boolean, string>>props.Options).get(value)!;
        default:
            return '';
    }
}

function OnSelectionChanged(pair: string | [number, string] | [boolean, string]): void {
    state.value = false;
    if (typeof pair == 'string') {
        emits('update:modelValue', pair);
    } else {
        emits('update:modelValue', pair[0]);
    }
}
</script>

<style scoped>
.dropdown {
    height: 3.6rem;
}

.header {
    height: 3.6rem;

    padding: 0 1.5rem;

    line-height: 3.6rem;
    text-align: left;

    border-radius: 0.6rem;

    background: url('/static/Exam/ic_arrow_down.png') #81859C1A;
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.container {
    background-color: #1E202C;
    border-radius: 0.6rem;
    border: solid 0.1rem #36384B;
}

.container>span {
    display: block;
    height: 3.6rem;

    padding: 0 1.5rem;

    color: #B1B1D4;
    font-size: 1.6rem;
    line-height: 3.6rem;
}

.container>span:hover {
    background-color: #A2A2FF1A;
}
</style>